<template>
  <view class="page1">
    <view class="wind-header">
      <u-cell-group>
        <!-- :value-style="areaName=='请选择地区'?'{color: '#333333'}':'{color: '#330b03'}'" -->
        <u-cell-item :value="areaName" isLink="" @click="showPicker()">
          <view slot="title" class="area-title">地区</view>

        </u-cell-item>
      </u-cell-group>
      <u-picker mode="region" v-model="show" :params="params" @confirm="confirm"></u-picker>
      <view class="findbtn-box">
        <view class="findbtn" @click="find()">
          开始查询
        </view>
      </view>
    </view>

    <view class="wind-content-data" v-show="windshow">
      <view class="wind-item-title">风资源查询结果如下</view>
      <view class="wind-item">
        <view class="left">风速(m/s)</view>
        <view class="right">{{resource.speed}}</view>
      </view>
      <view class="wind-item">
        <view class="left">发电时数(h)</view>
        <view class="right">{{resource.powers}}</view>
      </view>
      <view class="wind-item">
        <view class="left">燃煤基准价(元/kWH)</view>
        <view class="right">{{resource.firePrice}}</view>
      </view>
      <view class="wind-item">
        <view class="left">回收期税前(年)</view>
        <view class="right">{{resource.paybackTax}}</view>
      </view>
      <view class="wind-item">
        <view class="left">全投收益率(%)</view>
        <view class="right">{{resource.totalYield}}%</view>
      </view>
      <view class="wind-item">
        <view class="left">资本金收益率(%)</view>
        <view class="right">{{resource.capitalYield}}%</view>
      </view>
      <view class="wind-item">
        <view class="left">资本金净利润率(%)</view>
        <view class="right">{{resource.capitalRoe}}%</view>
      </view>
    </view>
    <view class="wind-content-nodata" v-show="!windshow">
      <view class="wind-no">
        <view class="sorry">Sorry!</view>

        <view class="item-text">暂时没有查到您想要的结果</view>
        <view class="item-text">敬请期待...</view>
      </view>
    </view>


  </view>
</template>

<script>
  export default {
    data() {
      return {
        params: {
          province: true,
          city: true,
          area: true
        },
        provinces: [],
        citys: [],
        countys: [],
        columns: [
          ["ss"]
        ],
        areaCode: "",
        areaName: "请选择地区",
        show: false,
        windshow: false,
        code: "test",
        resource: {
          capital_roe: null
        },


      }
    },
    mounted() {


    },
    onReady() {

    },
    onLoad() {
var login=this.checkLogin();
			if(!login)
			{
				return false;
			}


    },
    methods: {
      find() {

        if (this.$u.test.isEmpty(this.areaCode)) {

          uni.showToast({
            title: "请选择地区!",
            icon: "none"
          })

          return;
        }
        this.getWindResource(this.areaCode);


      },

      showPicker() {

        this.show = true;
      },
      navigateBack() {
        uni.navigateBack()
      },
      // 回调参数为包含columnIndex、value、values
      confirm(e) {

        this.areaCode = e.area.value;
        this.areaName = e.province.label + "-" + e.city.label + "-" + e.area.label;
        this.show = false;
      },
      cancel(e) {
        this.show = false;
      },
      getNavList() {
        this.navList = res.message
        console.log(res)
      },



      getWindResource(areaCode) {

        this.$u.api.getWindResource({
            areaCode: this.areaCode
          })
          .then(res => {

            if (res.data) {
              this.resource = res.data;
              this.windshow = true;
            } else {
              this.windshow = false;
            }



            console.log(res.data, "数据");
          });
      }
    },
  }
</script>


<style lang="scss">
  .page1 {
    height: 100vh;

    background-color: #F7F7F7;
  }

  .wind-header {
    background-color: #FFFFFF;

    .area-title {
      font-size: 30rpx;
      font-family: PingFang SC;

      color: #333333;
      line-height: 48rpx;
    }

    .area-novalue {
      font-size: 30rpx;
      font-family: PingFang SC;

      color: #CCCCCC;
      line-height: 48rpx;
    }

    .area-value {
      font-size: 30rpx;
      font-family: PingFang SC;

      color: #000000;
      line-height: 48rpx;
    }

    .findbtn-box {

      height: 120rpx;
      align-items: center;
      justify-content: center;

      display: flex;

      .findbtn {
        width: 520rpx;
        height: 80rpx;

        background: #3BA2FF;
        border-radius: 44rpx;
        align-items: center;
        justify-content: center;
        display: flex;
        font-size: 32rpx;
        font-family: PingFang SC;
        color: #FFFFFF;

      }
    }

  }

  .wind-content-nodata {
    height: 100%;
    background-color: #FFFFFF;
    margin-top: 20rpx;
    justify-content: center;
    align-items: center;
    display: flex;
    flex-direction: column;

    .wind-no {

      text-align: center;

      .sorry {

        font-size: 34rpx;
        font-family: PingFang SC;

        color: #333333;
        line-height: 48rpx;
      }

      .item-text {
        font-size: 28rpx;
        font-family: PingFang SC;

        color: #999999;
        line-height: 48rpx;
      }
    }
  }

  .wind-content-data {
    height: 100%;
    background-color: #FFFFFF;
    margin-top: 20rpx;

    display: flex;
    flex-direction: column;

    .wind-item-title {
      margin-top: 20rpx;
      margin-left: 29rpx;
      font-size: 30rpx;
      font-family: PingFang SC;

      color: #333333;
      line-height: 48rpx;
    }

    .wind-item {
      display: flex;
      flex-direction: row;
      justify-content: space-between;
      margin-left: 29rpx;
      margin-right: 29rpx;

      .left {

        font-size: 28rpx;
        font-family: PingFang SC;

        color: #999999;
        line-height: 48rpx;
      }

      .right {

        font-size: 28rpx;
        font-family: PingFang SC;

        color: #333333;
        line-height: 48rpx;
      }


    }
  }
</style>
